<template>
	<view class="add-agent-layout">
		<view class="add-agent-form">
			<xh-input :showTitle="true" title="代理商类型" minWidth="180rpx" placeholder="请选择类型" padding="30rpx" v-model="formStore.agentType" isSelect @didSelect="showSelectType"></xh-input>
			<view class="add-agent-form-header">
				<text>请输入新增代理商手机号</text>
			</view>
			<xh-input :showTitle="true" title="手机号" minWidth="180rpx" placeholder="请输入手机号" padding="30rpx" v-model="formStore.contactNo" :maxCount="11"></xh-input>
			<xh-input :showTitle="true" title="验证码" minWidth="180rpx" placeholder="请输入验证码" padding="30rpx" v-model="formStore.smsCode" :maxCount="6">
				<template #right>
					<text class="code-btn" :class="[isStartTime ? 'code-btn-select' : '']" @tap="checkedPhone">{{isStartTime ? `${seconds}秒后重试` : '获取验证码'}}</text>
				</template>
			</xh-input>
		</view>
		<view class="bottom-box">
			<xh-checkbox :isChecked="isAgree" showAgreement @change="value=>isAgree = value"></xh-checkbox>
		</view>
		<view class="submit-btn" :style="{marginTop:'50rpx'}" @tap="next">下一步</view>
		<uv-picker ref="picker" :columns="columns" @confirm="confirm"></uv-picker>
	</view>
</template>

<script setup>
	import { onUnload } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { totalSeconds, CUSTOMSERVICE_TEL } from '@/common/config/config.js'
	import { useFormStore } from '@/common/stores'
	import { sendCaptchaCheckedPhone,sendCaptcha,checkedAddAgentSms } from '@/common/api/api.js'
	const formStore = useFormStore()
	const columns = ref([['个人','企业']])
	//是否开始倒计时
	const isStartTime = ref(false)
	// 倒计时秒数
	const seconds = ref(totalSeconds)
	//计时器
	let timer = null
	const picker = ref(null)
	// 是否同意协议
	const isAgree = ref(false)
	//开始倒计时
	const startTimer = () => {
		isStartTime.value = true
		//每秒执行一次
		timer = setInterval(() => {
			seconds.value -= 1
			if (seconds.value == 0) {
				seconds.value = totalSeconds
				isStartTime.value = false
				clearInterval(timer)
			}
		}, 1000)
	}
	// 选择代理商类型
	const showSelectType = () => {
		picker.value.open()
	}
	// 选择类型回调
	const confirm = (res)=>{
		formStore.agentType = res.value[0]
	}
	// 校验手机号
	const checkedPhone = async ()=>{
		if (isStartTime.value) {
			return
		}
		if(!uni.$uv.test.mobile(uni.$uv.trim(formStore.contactNo, 'all'))) {
			uni.$utils.showToast('请输入正确的手机号')
			return
		}
		const res = await sendCaptchaCheckedPhone({phoneNumber:uni.$uv.trim(formStore.contactNo, 'all')})
		if(!uni.$uv.test.empty(res.result.tel)){
			uni.$utils.showToast('该手机号已注册， 请重新输入')
			return
		}
		startSendSms()
	}
	// 发送验证码
	const startSendSms = async ()=>{
		let params = {}
		params.phoneNumber = uni.$uv.trim(formStore.contactNo, 'all')
		params.smsType = 'addAgent'
		await sendCaptcha(params)
		startTimer()
	}
	
	// 下一步
	const next = async () => {
		if(uni.$uv.test.empty(formStore.agentType)){
			uni.$utils.showToast('请选择代理商类型')
			return
		}
		else if(!uni.$uv.test.mobile(uni.$uv.trim(formStore.contactNo,'all'))){
			uni.$utils.showToast('请输入正确的手机号')
			return
		}
		else if(uni.$uv.test.empty(formStore.smsCode)){
			uni.$utils.showToast('请输入验证码')
			return
		}
		else if(!isAgree.value){
			uni.$utils.showToast('请先阅读并同意相关协议')
			return
		}
		await checkedAddAgentSms({contactNo:formStore.contactNo,smsCode:formStore.smsCode})
		if(formStore.agentType == '个人'){
			uni.navigateTo({
				url:'/pages/my/auth/idcard/idcard'
			})
		}
		else{
			uni.navigateTo({
				url:'/pages/my/auth/enterprise/enterprise'
			})
		}
	}
	onUnload(()=>{
		if(timer){
			clearInterval(timer)
			timer = null
		}
	})
</script>

<style lang="scss" scoped>
	.add-agent-layout {
		padding-top: 1px;
		.add-agent-form-header{
			padding: 30rpx 30rpx;
			font-size: 24rpx;
			color: $xh-color-6;
		}
		.code-btn {
			color: $xh-theme-color;
			margin-left: 10rpx;
			font-size: 28rpx;
		}
		.code-btn-select {
			color: #cccccc;
		}
		.bottom-box{
			padding: 20rpx 30rpx;
		}
	}
</style>